<template>
  <div>
    <el-table size='mini' ref="multipleTable" :data="bondList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="BondName" :label="$t('聚合名称')" align='center' min-width="100">
        <template slot-scope="scope">
          <tooltip :html="scope.row.BondName" :content="scope.row.BondName" class="wid190" :refName="scope.row.BondName">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="mode" :label="$t('模式')" align='center' min-width="80"></el-table-column>
      <el-table-column prop="distribute" :label="$t('分包方式')" align='center' min-width="150">
        <template slot-scope="scope">
          <tooltip :html="scope.row.distribute" :content="scope.row.distribute" class="wid190" :refName="scope.row.distribute">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ipv4" :label="$t('IPv4/子网掩码')" align='center' min-width="200">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIPv4(scope.row,';<br/>')" :content="classMapShowIPv4(scope.row,',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ipv6" :label="$t('IPv6/前缀')" align='center' min-width="200">
        <template slot-scope="scope">
          <tooltip :html="classMapShowIPv6(scope.row,';<br/>')" :content="classMapShowIPv6(scope.row,',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="PortStatus" :label="$t('链路状态')" align='center' width="90" :formatter="PortStatus">
      </el-table-column>
      <el-table-column prop="PortFlag" :label="$t('状态')" align='center' min-width="80">
        <template slot-scope="scope">
          {{ PortFlagList[scope.row.PortFlag] }}
        </template>
      </el-table-column>
      <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" width="230">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="dialogVisible(scope.row)" :class="'config' + scope.$index">{{$t('配置')}}</el-button>
          <el-button type="primary" plain size="mini" @click="dialogCheckVisible(scope.row)" :class="'check' + scope.$index">{{$t('查看')}}</el-button>
          <el-button type="success" plain size="mini" @click="dialogEditVisible(scope.row)" :class="'edit' + scope.$index">{{$t('编辑')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Bond-dialog v-if="bondDialogVisible" @listData='listData' ref="refBondDialogVisible"></Bond-dialog>
    <bond-check-dialog v-if="bondCheckDialogVisible" ref="refBondCheckDialogVisible"></bond-check-dialog>
    <bond-edit-dialog v-if="bondEditDialogVisible" @listData='listData' ref="refBondEditDialogVisible"></bond-edit-dialog>
  </div>
</template>
<script>
import { getBondArray } from '@/api/network/api/bond'
import BondDialog from './components/BondDialog'
import BondCheckDialog from './components/BondCheckDialog.vue'
import BondEditDialog from './components/BondEditDialog.vue'
export default {
  name: 'Assetgroup',
  components: {
    BondDialog,
    BondCheckDialog,
    BondEditDialog
  },
  data () {
    return {
      bondDialogVisible: false,
      bondCheckDialogVisible: false,
      bondEditDialogVisible: false,
      bondList: [],
      name: '',
      PortFlagList: {
        'up': this.$t('开启'),
        'down': this.$t('关闭')
      },
      PortStatusList: {
        0: this.$t('路由模式'),
        1: this.$t('透明模式')
      }
    }
  },
  created () {
    this.listData()
  },
  methods: {
    // 列表
    listData () {
      getBondArray().then(res => {
        if (res.status === 0) {
          this.bondList = res.info
        }
      })
    },
    PortStatus (row) {
      switch (row.PortStatus) {
        case 0:
          return 'down'
        case 1:
          return 'up'
      }
    },
    // 添加按钮表单
    dialogVisible (data) {
      this.bondDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refBondDialogVisible.init(data)
      })
    },
    // 查看按钮表单
    dialogCheckVisible (data) {
      this.bondCheckDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refBondCheckDialogVisible.init(data)
      })
    },
    // 编辑按钮表单
    dialogEditVisible (data) {
      this.bondEditDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refBondEditDialogVisible.init(data)
      })
    },
    classMapShowIPv4 (data, str) {
      let reStr = ''
      if (data.ipv4) {
        data.ipv4.forEach((item, index) => {
          if (item.cPortIpv4 && index === (data.ipv4.length - 1) && str === ',') {
            reStr += item.cPortIpv4 + '/' + item.cPortNetmask
          } else if (item.cPortIpv4) {
            reStr += item.cPortIpv4 + '/' + item.cPortNetmask + str
          }
        })
      }
      return reStr
    },
    classMapShowIPv6 (data, str) {
      let reStr = ''
      if (data.ipv6) {
        data.ipv6.forEach((item, index) => {
          if (item.cPortIpv6 && index === (data.ipv6.length - 1) && str === ',') {
            reStr += item.cPortIpv6 + '/' + item.cDevIpv6Prefix
          } else if (item.cPortIpv6) {
            reStr += item.cPortIpv6 + '/' + item.cDevIpv6Prefix + str
          }
        })
      }
      return reStr
    }
  }
}
</script>
